/**
* Created by tanyichao on 2017/3/21.
*/
<template>
    <div class="page_container orderInfo-index">

        <!--<x-header>订单详情</x-header>-->
        <scroller lock-x ref="scroller">
            <div class="">
                <div class="order-status">
                    <img :src="orderInfo.stStoreImg | urlFilterAddServer" alt="">
                    <p class="suss">{{ orderInfo.orderStatus | orderStatusFilter}}</p>
                    <p class="assess" v-if="foodCode || orderInfo.orderStatus != '1'">{{ orderStatusText }}</p>
                    <p class="assess" v-else>取餐码不在当前时间获取,请在预定取餐时间内获取</p>
                    <div class="btn-group">
                        <div class="btn">
                            <!-- <span v-if="orderInfo.orderStatus == '1' && orderInfo.takeFoodCode == '正在准备您的订单'">
                                <span>{{orderInfo.takeFoodCode}}</span>
                            </span> -->
                            <span v-if="orderInfo.orderStatus == '1' && foodCode">
                                <span @click="doGetTakeFoodCode(orderInfo)" v-if="orderInfo.orderStatus == '1' && foodCode" >取餐码</span>
                            </span>

                            <span @click="doPayOrder(orderInfo)"  v-if="orderInfo.orderStatus == '0'">支付</span>
                            <span @click="doCancelOrder(orderInfo,3)"  v-if="orderInfo.orderStatus  == '0'">取消订单</span>
                            <span @click="doDeleteOrder(orderInfo,4)"  v-if="orderInfo.orderStatus  == '3' || orderInfo.orderStatus  == '5'">删除</span>
                            <span @click="doReCreateOrder(orderInfo)"  v-if="orderInfo.orderStatus  == '3' || orderInfo.orderStatus  == '5'">重新下单</span>
                            <span @click="doOrderAssess(orderInfo,0)"   v-if="orderInfo.orderStatus  == '2' && orderInfo.appraise == '0'">评价</span>
                            <span @click="doOrderAssess(orderInfo,1)"  v-if="orderInfo.orderStatus  == '2' && orderInfo.appraise == '1'">我的评价</span>
                        </div> 


                        <div class="btn arriveStore" 
                            v-show="orderInfo.showArriveBtn"
                            @click="arriveNotify">
                            <span class="child"
                                :class="{'disabled' : arriveDisabled}">
                                <span ref="arriveText">我已到店</span>
                            </span>    
                        </div>

                    </div>

                </div>
                <div class="order-detail" @click="doXStore(orderInfo)">
                    <group>
                        <cell :title="orderInfo.stStoreName" isLink link="" style="background-color: #fff">
                            <img slot="icon" width="20" style="display:block;margin-right:5px;"
                                 :src="orderInfo.stStoreImg | urlFilterAddServer">
                        </cell>
                    </group>
                </div>
                <div class="orderList vux-1px-b ">
                    <div class="orderItem" v-for="package in orderInfo.packages">
                        <span class="name">
                            <img :src="package.packageImg | urlFilterAddServer" alt="">
                            <span class="taste">
                                <span>{{ package.packageName }}</span>
                                <span class="tasteText" v-if="package.taste.length > 0">购买口味:{{ package.taste }}</span>
                            </span>
                        </span>
                        <span>
                            <span class="count">x{{ package.amount }}</span>
                            <span class="price">￥{{ package.price }}</span>
                        </span>
                    </div>
                </div>
                <div class="order-preferential" >
                    <span class="info" v-if="orderInfo.strStrategyId">
                    <span class="icon">{{ orderInfo.strategyContent }}</span>
                    <span>-￥{{ orderInfo.reduce }}</span>
                    </span>
                    <!--<span class="price" v-if="orderInfo.packages && orderInfo.reduce">实付￥{{ orderInfo.price - orderInfo.reduce }}</span>-->
                    <span class="price">实付￥{{ orderInfo.strStrategyPrice }}</span>
                    <span class="btn">
                            <span class="btn-border">
                                <a :href="stStorePhone" v-on:click.stop ><span>联系卖家</span></a>
                            </span>
                    </span>
                </div>
                <div class="order-info" v-if="false">
                    <cell title="我的评价" value="还有商品未评价" is-link></cell>
                </div>
                <div class="order-info-detail">
                    <span>订单信息</span>
                    <span>订单号：{{ orderInfo.orderNo }}</span>
                    <span>就餐方式：{{dineWay}}</span>
                    <span>下单方式：{{ orderMethodFilter }}</span>
                    <span>下单时间：{{ orderInfo.createTime }}</span>
                    <span>就餐时间：{{orderInfo.bookingTime ? orderInfo.bookingTime : orderInfo.createTime }}</span>
                    <span v-if="orderLength">订单时长：{{ orderLength }}</span>
                    <!-- <span v-if="orderLength">平均烹饪时长：{{ orderLength }}</span> -->
                </div>
            </div>
        </scroller>
        <transition name="fade">
            <div class="popOrderCode" v-if="isShowPopOrderCode" @click="chosePopOrderCode">
                <span class="popOrderCodeImg">
                   <img :src="orderInfo.qrcode | urlFilterAddServer" alt="">
                    <span>请在门店自助少扫码机进行扫码</span>
                </span>
            </div>
        </transition>
        <confirm v-model="orderConfirmShow" :title="orderConfirmShowText"
                 @on-cancel="onOrderCancel"
                 @on-confirm="onOrderConfirm">
        </confirm>
    </div>
</template>
<script>
    import Vue from 'vue'

    import {XHeader, Scroller, Cell, Group ,Confirm,ToastPlugin} from 'vux'

    import {getOrderInfoService,PostComfirmOrderService,getTakeFoodCodeService,arriveNotify} from '../services/index'

    import {mapState, mapActions} from 'vuex'

    Vue.use(ToastPlugin)
    export default {
        components: {
            XHeader,
            Scroller,
            Cell,
            Group,
            Confirm,
            ToastPlugin
        },
        created(){

        },

        mounted(){

        },
        activated(){
            if (this.orderId != '' || this.orderId != this.$route.query.orderId) {
                this.orderId = this.$route.query.orderId;
                this.back = this.$route.query.back || 0;
                this.getOrderInfo();
                this.getTakeFoodCode();
            }
        },
        watch: {

        },
        deactivated(){

        },
        data(){
            return {
                orderId: '',
                isShowPopOrderCode: false,
                orderInfo: {},
                orderItemObj:{},
                orderConfirmShowText: '',
                orderConfirmShow: false,
                orderLength:'',
                stStorePhone:'',
                foodCode:true,
                back:0,
                dineWay:"",
                arriveDisabled : false
            }
        },
        computed: {
            orderMethodFilter(){
                if (this.orderInfo.orderingMethod == '1') {
                    return '微信公众号';
                }
                return '小程序';
            },
            orderPriceAll(){
                let priceAll = 0;
                if (this.orderInfo.packages.length > 0) {
                    this.orderInfo.packages.forEach((item, index) => {
                        priceAll += item.amount * item.price;
                    })
                }
                return priceAll;
            },
            // orderAppraise(){

            //     if (this.orderInfo.appraise == 'true') {
            //         return true;
            //     }
            //     return false;
            // },
            orderStatusText(){
                let orderStatusText = '感谢您对本店的信任,期待再次光临';
               switch (this.orderInfo.orderStatus){
                   case '0' : orderStatusText = '逾期未支付，订单将自动取消';break;
//                   case '1' : orderStatusText = '';break;
//                   case '2' : orderStatusText = '';break;
                   case '3' : orderStatusText = '您取消了订单';break;
//                   case '4' : orderStatusText = '';break;
                   case '5' : orderStatusText = '系统取消了订单，理由是"超过15分钟未支付"';break;
               }
               return orderStatusText;
            }
        },
        methods: {
            ...mapActions([
                'updateStoreId',
                'updateDiningModeType',
                'updateBookingTime'
            ]),
            doXStore(item){
                if (item.stStoreId) {
                    window.localStorage.setItem("stStoreId",item.stStoreId);
                    this.updateStoreId(item.stStoreId);
                    this.$router.push({
                        path: "setTakeTime",
                        query: {
                            stStoreId:item.stStoreId,
                        }
                    })
                }
            },
            orderConfirmShowFuc(info){
                this.orderConfirmShow = true;
                this.orderConfirmShowText = info;
            },
            getOrderInfo(){
                if (!this.orderId) return;
                getOrderInfoService().save({orderId: this.orderId}).then((res) => {
                    const body = res.body;
                    if (body && body.code == 200) {



                        this.orderInfo = body.data;    

                        if(this.orderInfo.isPackage==0){
                            this.dineWay = "堂食";
                        }else if(this.orderInfo.isPackage==1){
                            this.dineWay = "打包";
                        }else if(this.orderInfo.isPackage==2){
                            this.dineWay = "净菜包";
                        }
                        this.orderLength = this.orderInfo.orderLength || false;
                        this.stStorePhone =  "tel:" + this.orderInfo.contactPhone;
                        this.$refs.scroller.reset({top:0});
                    }
                })
            },
            goOrderCode(){
                this.isShowPopOrderCode = true;
//                this.$router.push({
//                    name: 'orderConfirmInfo'
//                })
            },
            chosePopOrderCode(){
                this.isShowPopOrderCode = false;
            },
            orderAppraise(value){
                try {
                    switch (value) {
                        case '0' :
                            value = true;
                            break;
                        case '1' :
                            value = false;
                            break;
                        default  :
                            value = false;
                    }
                } catch (e) {
                    throw Error(e)
                }
                return value;
            },
            doPayOrder(item){
                if(item.dineWay == '0'){
                    this.updateDiningModeType(true);
                    this.updateBookingTime(item.bookingTime);
                }
                if (item.orderId) {
                    this.$router.push({
                        name: 'orderConfirm',
                        query: {
                            orderId: item.orderId,
                            stStoreId:item.stStoreId
                        }
                    })
                }
            },
            doCancelOrder(item, flag){
                console.log("取消");
                this.orderDoAction = 2;
                this.orderItemObj.item = item;
                this.orderItemObj.flag = flag;
                this.orderConfirmShowFuc('确定取消?');

            },
            doDeleteOrder(item, flag){
                this.orderDoAction = 3;
                this.orderItemObj.item = item;
                this.orderItemObj.flag = flag;
                this.orderConfirmShowFuc('确定删除?');

            },
            doReCreateOrder(item){
                if (item.orderId) {
                    this.$router.push({
                        path: "/",
                        query: {
                            stStoreId:item.stStoreId,
                        }
                    })
                }
            },
            doOrderPayAgain(item){
                if (item.orderId) {
                    this.$router.push({
                        path: "/",
                        query: {
                            stStoreId:item.stStoreId,
                        }
                    })
                }
            },
            doOrderAssess(item,action){
                const path = action == '0' ? 'assess' : 'showAssess';
                this.$router.push({
                    name: path,
                    query: {
                        orderId: item.orderId,
                        appraise:item.appraise
                    }
                })
            },
            onOrderAction(){
                const item = this.orderItemObj.item;
                const flag = this.orderItemObj.flag;

                if (item.orderId) {
                    PostComfirmOrderService().save({orderId: item.orderId, flag: flag , orderMethod : 0}).then((res) => {
                        const body = res.body;
                        if (body && body.code == 200) {
                            this.orderHistoryList = [];
                            if(flag != '4'){
                                this.getOrderInfo();
                            }else{
                                this.$router.back();
                            }
                        }
                    })
                }
            },
            doGetTakeFoodCode(info){
                // if(info.orderId){
                //     this.$router.push({
                //         name: 'orderConfirmInfo',
                //         query: {
                //             orderId: info.orderId,
                //         }
                //     })
                // }

                //跳转到新取餐码页面
                if(info.orderId){
                    this.$router.push({
                        name: 'tcnew',
                        query: {
                            orderId: info.orderId,
                        }
                    })
                }

            },
            getTakeFoodCode(){
                getTakeFoodCodeService().save({orderId: this.orderId}).then((res) => {
                    const bode = res.body;
                    if (bode && bode.code == 200) {
                        this.foodCode = true;
                    } else {
                        this.foodCode = false;
                    }
                })
            },
            onOrderConfirm(){
                this.onOrderAction();
            },
            onOrderCancel(){
                this.orderConfirmShow = false;
            },
            arriveNotify(){
                const that = this;
                if(that.arriveDisabled) return;
                let n = 1;
                that._arriveNotify(n);
            },
            _arriveNotify(n){
                
                arriveNotify().save({orderId: this.orderId}).then((res)=>{
                    
                    let body = res.body;

                    if(body.code == "525"){
                        if(n<5){
                            n += 1;
                            this._arriveNotify(n);
                        }else{
                            this.$vux.toast.show({
                                type : 'text',
                                text: "请稍后再试"
                            })    
                               

                            this._changeArriveStatus(); 
                            const arriveText = this.$refs.arriveText;
                            let time = 10;
                            (function countDown(time,callback){
                                if(time == 1){
                                    arriveText.innerHTML = "我已到店";
                                    callback();
                                }else{
                                    time -= 1;
                                    arriveText.innerHTML = "请稍等" + time + "秒"
                                    setTimeout(function(){
                                        countDown(time,callback);
                                    },1000)
                                }
                            })(time,this._changeArriveStatus);

                        }
                        return;
                    }

                    if(body.code == "200"){
                        this.$vux.toast.show({
                            type : 'text',
                            text: "正在准备您的订单"
                        })
                        
                    }else{
                        this.$vux.toast.show({
                            type : 'text',
                            text: body.msg
                        })
                    }
                    this._changeArriveStatus();
                });                
            },
            _changeArriveStatus(){
                this.arriveDisabled = !this.arriveDisabled;
            }
        },
        updated(){
            this.$nextTick(() => {
                this.$refs.scroller.reset()
            })
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    .disabled {
        background-color: rgba(200,200,200,.85) !important;
        color:#999 !important;
        border-color: #999 !important;
    }
    .btn-group {
        display: flex;
    }
    .btn-group .btn {
        flex : 1;
        margin:0 10px;
    }
    .btn-group .btn.arriveStore .child{
        background-color: #FA5A4C;
        color:#fff;
        border-color: #FA5A4C;
    }
    .vux-no-group-title{
        margin-top: 0px !important;
    }
    .weui-cells:before{
        border:none !important;
    }
    .weui-cell__hd img{
        width:1rem !important;
        height:1rem !important;
    }
    .orderInfo-index {
        position: relative;
        background-color: #f0f0f0;

        .popOrderCode {
            background-color: rgba(0, 0, 0, 0.5);
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;

            .popOrderCodeImg {
                position: absolute;
                top: 40%;
                left: 50%;
                transform: translate(-45%, -45%);

                span {
                    font-size: 0.6rem;
                    color: #fff;
                }
            }

        }
    }

    .orderInfo-index {
        .order-status {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            line-height: 37px;
            position: relative;
            padding: 0.75rem;

            img {
                width: 3rem;
                height: 3rem;
                border-radius: 100%;
            }
            .suss {
                background: url("../assets/img/icon-right.png") no-repeat right center;
                background-size: 0.45rem 0.75rem;
                padding-right: 1rem;
                font-size: 0.8rem;
                color: #333;
            }
            .assess {
                font-size: 0.6rem;
                color: #333;
            }
            .btn > span {
                display: inline-block;
                width: 4.5rem;
                height: 1.3rem;
                text-align: center;
                line-height: 1.3rem;
                border: 1px solid #FA5A4C;
                color: #FA5A4C;
                font-size: 0.75rem;
            }
            .btn > span:not(:last-child) {
                margin-right: 0.5rem;
            }
        }
        .order-detail {
            background-color: #fff;
            margin-top: 0.25rem;
            font-size: 0.6rem;
        }
        .orderList {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            padding: 0.5rem 15px 0.25rem 15px;
            background-color: #fff;

            .orderItem {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                padding: 0.25rem 0;

                img {
                    width: 2rem;
                    height: 2rem;
                }
                > span {
                    display: flex;
                    flex-flow: row nowrap;
                    font-size: 0.75rem;
                    > span {
                        margin-left: 0.5rem;
                    }
                }
                > span:nth-child(1) {
                    width: 70%;
                    justify-content: flex-start;
                    align-items: center;
                }
                > span:nth-child(2) {
                    width: 30%;
                    justify-content: space-between;
                    align-items: center;
                }
                .count {
                    color: #d1d1d1;
                }
                .taste{
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                }
                .tasteText{
                    font-size: 0.5rem;
                    color: #999;
                    margin-top: 0.2rem;
                }
            }
        }
        .order-preferential {
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            padding: 1rem 15px 0.5rem 15px;
            background-color: #fff;

            .info {
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                color: #FA5A4C;
                font-size: 0.75rem;

                .icon {
                    background: url("../assets/img/reduction.png") no-repeat left center;
                    background-size: 1rem 1rem;
                    padding-left: 1.2rem;
                    color: #999;
                }

            }
            .price {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-end;
                color: #FA5A4C;
                font-size: 0.75rem;
                padding: 0.5rem 0;
            }
            .btn {

                color: #FC832E;
                display: flex;
                flex-flow: row nowrap;
                justify-content: center;
                .btn-border {
                    border: 1px solid #FC832F;
                    border-radius: 5px;
                    width: 4.8rem;
                    font-size: 0.6rem;
                    height: 1.2rem;
                    text-align: center;
                    line-height: 1.2rem;

                    a{
                        color: #FC832F;
                        padding: 0.2rem 0;
                        font-size: 0.7rem;
                    }
                    span {
                        background: url("../assets/img/orange-phone.png") no-repeat left center;
                        background-size: 0.7rem 0.7rem;
                        padding-left: 1rem;
                    }
                }

            }
        }
        .order-info {
            background-color: #fff;
            margin-top: 0.25rem;
            font-size: 0.6rem;

        }
        .order-info-detail {
            background-color: #fff;
            margin-top: 0.25rem;
            font-size: 0.6rem;
            display: flex;
            line-height: 1rem;
            flex-flow: column nowrap;
            justify-content: flex-start;
            padding: 10px;

            .copy {
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                padding-right: 2rem;
                .btn {
                    border: 1px solid #CACACA;
                    display: inline-block;
                    width: 2rem;
                    text-align: center;
                }
            }
        }
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */
    {
        opacity: 0
    }
</style>
